<template>
	<view class="myOrder">
		<view class="tabbar">
			<view :class="item.status == selindex?'check':''" v-for="(item,index) in nav" :key="index" @click="selStatus(item.status)">
				{{ item.name }} 
			</view>
		</view>
		<view class="main">
			<view class="content" v-for="(item,index) in pageResult.list" :key="index">
				<view class="top"  @click="jump('lobby_order_view', item.id)">
					<view class="state">
						<text>订单编号:{{item.order_sn}}</text>
						<text>{{item.order_status_name}}</text>
					</view>
					<view class="item" style="border-bottom: 1upx solid #ddd;">
						<image :src="item.merchantPicture" mode="aspectFill" style="width: 50upx;height: 50upx;"></image>
						<text style="width: 35%;">{{item.merchantName}}</text>
						<view class="right" style="width: 60%;text-align: right;">桌号：{{item.desk_title}}</view>
					</view>
					<view class="item" v-for="(product,index2) in item.product_list" :key="index2">
						<image :src="product.product_picture" mode="aspectFill"></image>
						<view class="right">
                            <view>
                                <span style="background: rgba(235, 89, 56, 1); color: #ffffff; padding: 0 10rpx;margin-right: 10rpx;">{{product.reductionName}}</span>
                                {{product.product_name}}
                            </view>
							<text>{{product.sku_name}}</text>
							<text>{{product.total_money > 0 ? '￥'+product.total_money : ''}}</text>
							<text class="num">x{{product.num}}</text>
						</view>
					</view>
                    <view v-for="(childItem,index) in item.chlid_list" :key="index">
                        <view class="item">
                        	<text>加菜订单</text>
                        	<text>{{childItem.orderSn}}</text>
                        </view>
                        <view class="item" v-for="(childProduct,index) in childItem.productList" :key="index" >
                            <image :src="childProduct.product_picture" mode="aspectFill"></image>
                            <view class="right">
                                <view>
                                    <span style="background: rgba(235, 89, 56, 1); color: #ffffff; padding: 0 10rpx;margin-right: 10rpx;">{{childProduct.reductionName}}</span>
                                    {{childProduct.product_name}}
                                </view>
                                <text>{{childProduct.sku_name}}</text>
                                <text>{{childProduct.total_money > 0 ? '￥'+childProduct.total_money : ''}}</text>
                                <text class="num">x{{childProduct.num}}</text>
                            </view>
                        </view>
                    </view>
				</view>
				<view class="bot">
					<view class="bot_pic"  @click="jump('lobby_order_view', item.id)">
						<text>
							共{{item.product_count}}件商品 {{item.payInfo.shipping_money > 0 ? '茶位费：￥' + item.payInfo.shipping_money : ''}} 总计：
						</text>
						<text class="red">
							{{item.payInfo.total_money > 0 ? '￥'+item.payInfo.total_money : ''}}
						</text>
					</view>
					<view class="bot_state">
						<text v-for="(button,index3) in item.button_list" :key="index3" @click="operate(button.type, index)" class="sel">
							{{button.name}}
						</text>
					</view>
				</view>
			</view>
			<view v-if="pageResult.list.length == 0" class="nocontent">
				<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/noItem.png" ></image>
				<!-- <text>暂无记录～</text> -->
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="pay_type">
				<image @click="close" class="close" :src="'https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png'" mode="aspectFill"></image>
				<view class="title">选择支付方式</view>
				<view class="paypir">
					<text>应付金额</text>
					<text>￥{{pay_money}}</text>
				</view>
				<view class="line3"  v-if="total_hdq > 0"  @click="setUseHdq()">
					<view :class="is_use_hdq == 1 ?'sel':'nosel'"></view>
					<text>使用互动券{{total_hdq}}抵扣金额￥{{total_hdq}}</text>
				</view>
				<view class="line2" >
					<text>余额支付 - 当前余额：{{user_money}}</text>
					<view :class="pay_type == 5 ?'sel':'nosel'" @click="selPayType(5)" v-if="Number(user_money) >= Number(pay_money)"></view>
					<text v-else>余额不足</text>
				</view>
				<view class="line2">
					<text>在线微信支付</text>
					<view :class="pay_type == 1 ?'sel':'nosel'" @click="selPayType(1)"></view>
				</view>
				<view class="pay_bot" @click="subPay()">确认支付</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
    var _self;
	import serve from '../../static/request.js';
	import common from '../../static/jump.js';
	import wechatPay from '../../static/wechatPay.js';
	export default {
		data() {
			return {
				list: [{}, {}, {}, {}],
				nav: [
					{'status' : 9,  'name': "全部"},
					{'status' : 0,  'name': "待付款"},
					{'status' : 1,  'name': "待上菜"},
					{'status' : 3,  'name': "已上齐"},
					{'status' : 4,  'name': "已完成"},
					{'status' : -1,  'name': "已取消"},
				],
				selindex: 9,
				pay_id: 0,
				user_money: 0,
				is_use_hdq: 0,
				total_hdq: 0,
				use_point: 0,
				user_integral: 0,
				pay_money: 0,
				pay_type: 1,
				sel_pay_key : 0,
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					synthesize_status: 9,
					type: 2,
					page: 0,
					pageSize: 10
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				}
			}
		},
		methods: {
			getList() {
				_self.pageParam.page++
				serve.request({
                    url: '/lobby/order/list',
                    data: _self.pageParam
                }).then(res => {
                    if (res.data && res.data.length > 0) {
                        _self.pageResult.list=_self.pageResult.list.concat(res.data);
                    }
                    _self.pageResult.isEmpty = _self.pageResult.list.length == 0;
                    _self.pageResult.isEnd = res.data.length == 0; 
                });
			},
			selStatus(status) {
				_self.selindex = status;
				_self.pageParam.synthesize_status = status;
				_self.pageParam.page=0;
				_self.pageResult.list=[];
				_self.getList();
			},
			operate(operateType, key) {
				let operateId = _self.pageResult.list[key].id;
				if(operateType == 'order_cancel') {
					uni.showModal({
					    title: '提示',
					    content: '您确定取消该订单吗',
					    success: function (res) {
					        if (res.confirm) {
					            serve.request({
									url: '/member/order/cancel',
									data:{
										appkey: uni.getStorageSync('appkey'),
										'access-token': uni.getStorageSync('access-token'),
										id:operateId,
									}
								}).then(res => {
									uni.showToast({
										title:res.message,
										icon: 'none'
									});
									if(res.code == 200) {
										if(_self.selindex == 9){
											_self.pageResult.list[key].order_status_name = "已取消";
											_self.pageResult.list[key].button_list = [];
										} else {
											_self.pageResult.list.splice(key,1);
										}
										_self.$forceUpdate();
									} 
								});
					        } 
					    }
					});
					return ;
				} else if(operateType == 'order_pay'){
					let item = _self.pageResult.list[key];
					_self.is_use_hdq = 0;
					_self.sel_pay_key = key;
					_self.pay_money = item.payInfo.pay_money;
					_self.use_point = item.payInfo.hdq_money;
					_self.pay_id = operateId;
					if(Number(_self.user_integral) - Number(_self.use_point) >= 0) {
						_self.total_hdq = _self.use_point;
					} else {
						_self.total_hdq = _self.user_integral;
					}
					_self.$refs.popup.open();
					return ;
				} else if(operateType == 'tip_delivery'){
					serve.request({
						url: '/member/order/tip-delivery',
						data:{
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							id:operateId,
						}
					}).then(res => {
						uni.showToast({
							title:res.message,
							icon: 'none'
						});
					});
					_self.pageResult.list[key].button_list = [
						{'type': 'add_eat', 'name' : '加菜', 'dataId': _self.pageResult.list[key].id},
					];
				} else if(operateType == 'add_eat'){
					uni.navigateTo({
					    url: '/lobbyEat/addEat?orderId='+operateId+'&merchantId='+_self.pageResult.list[key].merchantId
					});
				} else if(operateType == 'evaluate_order'){
					common.jump('evaluate_store', _self.pageResult.list[key].merchantId+'&orderId='+operateId);
				}
			},
			searchMemberInfo() {
				serve.request({
					url: '/member/member/index',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token')
					}
				}).then(res => {
					_self.user_money = res.data.user_money;
					_self.user_integral = res.data.user_integral;
				});
			},
			setUseHdq(){
				_self.is_use_hdq = _self.is_use_hdq == 1 ? 0 : 1;
				let payMoney = Number(_self.pay_money);
				if(_self.is_use_hdq == 1) {
					payMoney = Number(payMoney) - Number(_self.total_hdq);
				} else {
					payMoney = Number(payMoney) + Number(_self.total_hdq);
				}
				_self.pay_money = parseFloat(payMoney).toFixed(2);
				_self.$forceUpdate();
			},
			selPayType(type) {
				_self.pay_type = type;
			},
			close() {
				_self.$refs.popup.close();
			},
			subPay() {
                let item = _self.pageResult.list[_self.sel_pay_key];
                serve.request({
                	url: '/order/pay/reset-pay',
                	data: {
                		appkey: uni.getStorageSync('appkey'),
                		'access-token': uni.getStorageSync('access-token'),
                		'data_type' : 'order_pay',
                		'data_id' : item.id,
                		is_use_hdq: _self.is_use_hdq,
                		is_use_tea: 0,
                		pay_type: _self.pay_type
                	}
                }).then(res => {
                	if(res.code == 200) {
                		if(res.data.is_pay == 1) {
                            wechatPay.payItemFun('order_pay', res.data.dataId, '/myOrder/order/lobbyView?id='+res.data.dataId);
                			return ;
                		}
                		uni.redirectTo({
                			url: '/myOrder/order/lobbyView?id='+res.data.dataId
                		});
                		return ;
                	} 
                	uni.showToast({
                		title: res.message,
                		icon : 'none'
                	});
                });
            },
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
            _self = this;
			_self.selindex = options.synthesize_status || 9;
			_self.pageParam.synthesize_status = options.synthesize_status || 9;
		},
		onShow() {
			_self.getList();
			_self.searchMemberInfo();
		},
		onPullDownRefresh() {
			_self.pageParam.page=0;
			_self.pageResult.list=[];
			_self.getList();
			_self.searchMemberInfo();
		},
		//触底加载
		onReachBottom() {
			console.log('触底'); 
			if(_self.pageResult.isEnd ||_self.pageResult.isEmpty){
				return
			}
			_self.getList()
		}
	}
</script>

<style scoped lang="scss">
	.myOrder {
		.tabbar {
			width: 100%;
			height: 110upx;
			box-sizing: border-box;
			position: fixed;
			// top: 0upx;
			background: #FFFFFF;
			z-index: 100;
			width: 100%;
			display: flex;
			border-bottom: 1upx rgba(235, 235, 235, 1) solid;

			view {
				color: #999999;
				font-size: 32upx;
				display: inline-block;
				width: 20%;
				vertical-align: middle;
				text-align: center;
				line-height: 110upx;
			}

			.check {
				position: relative;
				color: #232323;
			}
			.check::after{
				content: "";
				position: absolute;
				bottom: 0;
				left: 45%;
				width:30upx;
				height:7upx;
				background:rgba(255,188,0,1);
				border-radius:3upx;
			}
		}

		.main {
			padding-top: 110upx;

			.content {
				box-sizing: border-box;
				border-bottom: 16upx #F7F7FA solid;

				.top {
					box-sizing: border-box;
					padding-left: 30upx;
					border-bottom: 1upx #EBECF0 solid;

					.state {
						display: flex;
						font-size: 28upx;
						height: 96upx;
						align-items: center;
						justify-content: space-between;
						color: rgba(57, 72, 107, 0.5);
						padding-right: 30upx;
						box-sizing: border-box;
						border-bottom: 1upx rgba(204, 204, 204, 0.5) solid;

						text:last-child {
							color: #FF5F60;
							font-weight: bold;
						}
					}

					.item {
						display: flex;
						align-items: center;
						padding: 32upx 27upx 32upx 0upx;
						box-sizing: border-box;

						image {
							width: 170upx;
							height: 170upx;
							margin-right: 16upx;
						}

						.right {
							width: 510upx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							font-size: 32upx;
							position: relative;

							text:nth-child(2) {
								padding-top: 22upx;
								color: #999999;
								font-size: 24upx;
							}

							text:nth-child(3) {
								font-size: 28upx;
								color: #EB5938;
								font-weight: bold;
								margin-top: 10upx;
							}
							text:nth-child(4) {
								font-size: 36upx;
								text-decoration:line-through;
								// color:rgba(204,204,204,1);
							}

							text:first-child {
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
								word-break: break-all;
							}

							.num {
								position: absolute;
								top: 66upx;
								right: 0upx;
								font-size: 24upx;
								color:#999999;
                                text-decoration: none !important;
							}
						}
					}
				}

				.bot {
					padding-right: 30upx;

					.bot_pic {
						padding: 30upx 0upx;
						font-size: 28upx;
						width: 100%;
						display: flex;
						justify-content: flex-end;
						align-items: flex-end;

						text.red {
							color: #EB5938;
							font-weight: bold;
							font-size: 32upx;
						}
					}

					.bot_state {
						display: flex;
						justify-content: flex-end;

						text {
							line-height: 72upx;
							text-align: center;
							font-size: 28upx;
							margin-left: 23upx;
							margin-bottom: 40upx;
							width:200upx;
							height:72upx;
							border-radius:36upx;
						}

						.sel {
							background: #EB5938;
							color: #FFFFFF;
						}
						.sel1 {
							background:rgba(255,255,255,1);
							border:1px solid #999999;
							color: #999999;
						}
						.sel2 {
							border:1px solid rgba(255,95,96,1);
							color:rgba(255,95,96,1) ;
						}
					}
				}
			}
		}
		
		.nocontent{
			width: 100%;
			padding-top: 338upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width:220upx;
				height:220supx;
			}
			text{
				font-size:28upx;
				color:rgba(204,204,204,1);
			     margin-top: 30upx;
			}
		}
		.pay_type{
			position: relative;
			width: 100%;
			background: #FFFFFF;
			padding-bottom: 140upx;
			.close{
				position: absolute;
				width:23upx;
				height:23upx;
				right: 40upx;
				top: 45upx;
			}
			.title{
				width: 100%;
				text-align: center;
				height: 100upx;
				line-height: 100upx;
				font-size: 36upx;
				border-bottom: 1upx #EBECF0 solid;
			}
			.paypir{
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				padding: 50upx 0upx 20upx;
				font-size: 28upx;
				color: #FF5F60;
				text:last-child{
					color: #FF5F60;
					font-size: 40upx;
					font-weight: bold;
					margin-top: 10upx;
				}
			}
			.line2{
				width: 100%;
				box-sizing: border-box;
				padding: 36upx;
				display: flex;
				justify-content: space-between;
				font-size: 28upx;
				color: #333333;
				border-bottom: 1upx #EBECF0 solid;
				.txt{
					color: #999999;
				}
				.sel {
					background-image: url(https://hdsq.aoorange.cn/attachment/xcx/icon/xuanzhong.png);
					background-repeat: no-repeat;
					width: 40upx;
					height: 40upx;
					background-size: 100%;
				}
				
				.nosel {
					width: 36upx;
					height: 36upx;
					border: 1upx solid #666666;
					border-radius: 50%;
				}
			}
			.line3{
				width: 100%;
				box-sizing: border-box;
				padding: 36upx;
				display: flex;
				font-size: 28upx;
				color: #333333;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
				.txt{
					color: #999999;
					padding-left: 20upx;
				}
				.sel {
					background-image: url(https://hdsq.aoorange.cn/attachment/xcx/icon/xuanzhong.png);
					background-repeat: no-repeat;
					width: 40upx;
					height: 40upx;
					background-size: 100%;
				}
				
				.nosel {
					width: 36upx;
					height: 36upx;
					border: 1upx solid rgba(60, 72, 104, 1);
					border-radius: 50%;
				}
			}
			.pay_bot {
			  width: 100%;
			  position: fixed;
			  left: 0;
			  bottom: 0;
			  height: 100upx;
			  background: #FFBC00;
			  color: #fff;
			  font-size: 32upx;
			  line-height: 100upx;
			  text-align: center;
			  border-radius: 0;
			  &::after{
				  border: none;
			  }
			}
		}
	}
</style>
